<template>
  <div ref="aceRef" style="height: calc(100vh - 120px);"></div>
</template>
<script>

import ace from 'ace-builds'
import 'ace-builds/src-noconflict/theme-monokai'
import 'ace-builds/src-noconflict/mode-javascript'
import 'ace-builds/src-noconflict/mode-sqlserver'
import 'ace-builds/src-noconflict/ext-beautify'
import 'ace-builds/src-noconflict/snippets/javascript'
import 'ace-builds/src-noconflict/snippets/sqlserver'
import 'ace-builds/src-noconflict/ext-language_tools'

export default {
  props: {
    mode: {type: String, default: 'javascript'},
    modelValue: {type: String, default: 'javascript'},
  },
  data () {
    return {
      editor: null,
      beautify: null,
    }
  },
  emits: ['update:modelValue'],
  mounted() {
    this.editor = ace.edit(this.$refs.aceRef, {
      mode: `ace/mode/${this.mode}`,
      enableSnippets: true,
      enableLiveAutocompletion: true,
      enableBasicAutocompletion: true,
    })
    this.editor.setValue(this.modelValue)
    this.beautify = ace.require('ace/ext/beautify')
    this.beautify.beautify(this.editor.session)
    this.editor.getSession().on('change', this.change)
  },
  methods: {
    change () {
      this.$emit('update:modelValue', this.editor.getSession().getValue())
    },
    getData () {
      return this.editor.getValue()
    },
    setData (val) {
      this.editor.setValue(val)
      this.beautify.beautify(this.editor.session)
    }
  }
}
</script>